@height: 4px;
@bar-width: 160px;
@label-width: 98px;

.progress-bar {
    width: @bar-width;
    height: @height;
    background-color: rgb(var(--border-color));
    border-radius: var(--border-radius-lg);
    margin-right: var(--margin-xs);

    &-container {
        display: flex;
        align-items: center;
        margin: 0 var(--margin-xs) 0 var(--margin-xs);
    }

    &-label {
        font-size: var(--font-size-xxs);
        color: rgb(var(--text-color-secondary));
        width: @label-width;
        text-align: right;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-right: var(--margin-xs);
        line-height: 17px;
    }

    &-inner {
        height: @height;
        border-radius: var(--border-radius-lg);
        transition: width 0.5s;
    }

    &-close-button {
        background: none;
        border: none;
        font-size: var(--font-size-xxs);
        color: rgb(var(--text-color));
        cursor: pointer;
        padding: 0;
        margin: 0;
        line-height: 1;
        display: flex;
        align-items: center;

        &:hover {
            color: rgb(var(--text-color-secondary));
        }
    }
}
